﻿@page "/range-slider/custom-bar"

@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.Buttons;
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the customization of Slider's selection bar. Drag the thumb over the bar for selecting the values between Min and Max.</p>
</SampleDescription>
<ActionDescription>
   <p>In this demo, customization of track using CSS is demonstrated.</p>
      <ul>
        <li>Height - In this sample, track has been customized to custom height. Here, thumb has to be adjusted based on the track height.</li>
        <li>Gradient color - In this sample, track has been customized with gradient color. </li>
        <li>Dynamic thumb and selection bar color - In this sample, track and thumb has been customized to different colors for different intervals by using the created and change events. </li>
      </ul>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <div class="slider-content-wrapper">
            <div class="slider_container">
                <div class="slider-labeltext slider_userselect">Height</div>
                <SfSlider Value="30" ID="height_slider">
                </SfSlider>
            </div>
            <div class="slider_container">
                <div class="slider-labeltext slider_userselect">Gradient color</div>
                <SfSlider Value="50" ID="gradient_slider" Type="SliderType.MinRange">
                </SfSlider>
            </div>
            <div class="slider_container">
                <div class="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
                <SfSlider @bind-Value="@Value" TValue="int" ID="dynamic_color_slider" Type="SliderType.MinRange" CssClass="@DynamicColor">
                    <SliderEvents TValue="int" ValueChange="@(e => { OnChange(e.Value); })"></SliderEvents>
                </SfSlider>
            </div>
        </div>
    </div>
</div>

@code {
    string DynamicColor = "e-slider-green";
    int Value = 20;
    void OnChange(int value)
    {
        if (value > 0 && value <= 25)
        {
            DynamicColor = "e-slider-green";
        }
        else if (value > 25 && value <= 50)
        {
            DynamicColor = "e-slider-royalblue"; 
        }
        else if (value > 50 && value <= 75)
        {
            DynamicColor = "e-slider-darkorange"; 
        }
        else if (value > 75 && value <= 100)
        {
            DynamicColor = "e-slider-red"; 
        }
    }
}

<style>
    #dynamic_color_slider.e-slider-royalblue .e-range {
        background-color: royalblue;
    }

    #dynamic_color_slider.e-slider-green .e-range {
        background-color: green;
    }

    #dynamic_color_slider.e-slider-darkorange .e-range {
        background-color: darkorange;
    }

    #dynamic_color_slider.e-slider-red .e-range {
        background-color: red;
    }

    #dynamic_color_slider.e-slider-royalblue .e-handle {
        background-color: royalblue;
    }

    #dynamic_color_slider.e-slider-green .e-handle {
        background-color: green;
    }

    #dynamic_color_slider.e-slider-darkorange .e-handle {
        background-color: darkorange;
    }

    #dynamic_color_slider.e-slider-red .e-handle {
        background-color: red;
    }

    .slider-content-wrapper {
        width: 40%;
        margin: 0 auto;
        min-width: 185px;
    }

    .slider-userselect {
        -webkit-user-select: none;
        /* Safari 3.1+ */
        -moz-user-select: none;
        /* Firefox 2+ */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;
        /* Standard syntax */
    }

    .slider-labeltext {
        text-align: -webkit-left;
        font-weight: 500;
        font-size: 13px;
        padding-bottom: 10px;
    }

    .material .e-slider-container #height_slider.e-slider .e-handle,
    .material.e-bigger .e-slider-container #height_slider.e-slider .e-handle,
    .material .e-slider-container #gradient_slider.e-slider .e-handle,
    .material.e-bigger .e-slider-container #gradient_slider.e-slider .e-handle {
        height: 16px;
        width: 16px;
    }

    .material .e-slider-container.e-horizontal #height_slider .e-handle,
    .material.e-bigger .e-slider-container.e-horizontal #height_slider .e-handle,
    .material .e-slider-container.e-horizontal #gradient_slider .e-handle,
    .material.e-bigger .e-slider-container.e-horizontal #gradient_slider .e-handle {
        margin-left: -8px;
        top: calc(50% - 8px);
    }

    .e-bigger:not(.material) .e-slider-container.e-horizontal #height_slider.e-slider .e-handle,
    .e-bigger:not(.material) .e-slider-container.e-horizontal #gradient_slider.e-slider .e-handle {
        margin-left: -11px;
        top: calc(50% - 11px);
    }

    .e-bigger:not(.material) .e-slider-container #height_slider.e-slider .e-handle,
    .e-bigger:not(.material) .e-slider-container #gradient_slider.e-slider .e-handle {
        height: 22px;
        width: 22px;
    }

    .e-slider-container #height_slider.e-slider .e-handle,
    .e-slider-container #gradient_slider.e-slider .e-handle {
        height: 20px;
        width: 20px;
    }

    .e-slider-container.e-horizontal #height_slider .e-handle,
    .e-slider-container.e-horizontal #gradient_slider .e-handle {
        margin-left: -10px;
        top: calc(50% - 10px);
    }

    .slider_container {
        margin-top: 40px;
    }

    .e-bigger .slider-content-wrapper {
        width: 80%;
    }

    #height_slider .e-tab-handle::after {
        background-color: #f9920b;
    }

    #height_slider.e-control.e-slider .e-slider-track {
        height: 8px;
        top: calc(50% - 4px);
        border-radius: 0;
    }

    .highcontrast #height_slider.e-control.e-slider .e-slider-track {
        height: 10px;
        top: calc(50% - 5px);
        border-radius: 0;
    }

    .fabric .slider_container .e-slider-hover .e-slider-track,
    .fabric .slider_container .e-slider-container:active .e-slider-track,
    .fabric .slider_container .e-slider-container .e-slider .e-tab-track {
        background-color: #c8c8c8;
    }

    #gradient_slider.e-control.e-slider .e-range {
        height: 6px;
        top: calc(50% - 3px);
        border-radius: 5px;
        background: -webkit-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
        background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
        background: -moz-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
        background: url();
    }

    .fabric .slider_container .e-slider-hover .e-slider-track,
    .fabric .slider_container .e-slider-container:active .e-slider-track,
    .fabric .slider_container .e-slider-container .e-slider .e-tab-track {
        background-color: #c8c8c8;
    }

    #gradient_slider.e-control.e-slider .e-slider-track {
        height: 8px;
        top: calc(50% - 4px);
        border-radius: 5px;
    }
</style>
